<template>
	<div>
		<div class="section-panel">
			<div>
				<el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加管理员</el-button>
			</div>
		</div>
		<div class="section-panel mt10">
			<div style="height:calc(100vh - 160px); padding-bottom:40px; box-sizing: border-box">
				<el-table :data="tableData" height="100%">
					<el-table-column type="selection" width="80px" align="center"></el-table-column>
					<el-table-column type="index" width="80px" label="ID"></el-table-column>
					<el-table-column label="登录账号" prop="username"></el-table-column>
					<el-table-column label="用户名" prop="nickname"></el-table-column>
					<el-table-column label="手机号" prop="mobile" ></el-table-column>
					<el-table-column label="所属角色组" prop="role"></el-table-column>
					<el-table-column label="状态" prop="status">
						<template v-slot="scope">
							<div v-if="scope.row.enable==1" style="display: flex; align-content: center; justify-items: center;"> 
								<div style="margin-top:5px;width:10px; background-color: #00aa00;border-radius: 10px;height:10px;"></div>
								<div style="margin-left: 2px; color:#00aa00;">启用</div>
							</div>
							<div v-if="scope.row.enable==0" style="display: flex; align-content: center; justify-items: center;">
								<div style="margin-top:5px;width:10px; background-color: #ff5500;border-radius: 10px;height:10px;"></div>
								<div style="margin-left: 2px; color:#ff5500;">禁用</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="最后登录" prop="lastlogin"></el-table-column>
					<el-table-column label="操作" width="200px" align="center">
						<template v-slot="scope">
							<el-button-group>
								<el-button icon="el-icon-edit-outline" type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
								<el-button icon="el-icon-delete" type="danger">删除</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>

				<div class="flex" style="line-height: 40px;">
					<div class="flex1">
					</div>
					<div style="color: #888;">
						共{{tableData.length}}条记录
					</div>
				</div>
			</div>
		</div>
		<UserAddUI ref="userAddUI" v-if="createVisible" @close="createVisible=false"></UserAddUI>
		<UserEditUI ref="userEditUI" v-if="editVisible" @close="editVisible=false"></UserEditUI>
	</div>
	
</template>

<script>
	import http from '@/utils/http';
	import UserAddUI from './user_create.vue';
	import UserEditUI from './user_edit.vue';
	export default {
		components:{
			UserAddUI,
			UserEditUI
		},
		data() {
			return {
				tableData: [],
				createVisible:false,
				editVisible:false,
			}
		},
		mounted() {
			this.loadDataList();
		},
		methods:{
			loadDataList(){
				const params = {
					nickname:''
				}
				http.post("/api/admin/users/list_by_page", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.tableData=res.data.list;
					}
				}).catch(error => {})
			},
			handleCreate(){
				console.log('add');
				this.createVisible=true;
				this.$nextTick(()=>{
					this.$refs.userAddUI.dialogVisible=true;
				})
			},
			handleEdit(index,data){
				this.editVisible=true;
				this.$nextTick(()=>{
					this.$refs.userEditUI.dialogVisible=true;
					this.$refs.userEditUI.init(index,JSON.parse(JSON.stringify(data)));
				})
			}
		}
	}
</script>

<style>

</style>